<template>
  <div
    class="v-diagram-desc-wrap g-jc-sb"
    :class="{ _disable: disabled }"
  >
    <el-input
      v-model="inputvalue"
      class="g-one-line"
      type="textarea"
      :rows="1"
      :disabled="disabled"
      maxlength="100"
      @change="handleInputChange"
    ></el-input>

    <div
      v-if="selected"
      class="g-pd-r-4 img-btn"
    >
      <img
        src="statics/icons/app/iconmore.png"
        class="g-pointer"
        @click="handleClick"
      />
    </div>

    <div>
      <m-modal
        :visible="modalVisivle"
        mask
        resizable
        title="视图描述"
        :showFooter="true"
        cancelText="取 消"
        okText="确 定"
        :width="292"
        :height="244"
        class="v-diagram-desc-modal"
        :confirmDisabled="disabled"
        @ok="handleOkModal"
        @cancel="handleCancelModal"
      >
        <div style="width: 100%; height: 100%">
          <el-input
            v-model="inputvalue"
            type="textarea"
            :style="{ border: '1px solid #ccc' }"
            :disabled="disabled"
            class="_input g-one-line"
            maxlength="2000"
            show-word-limit
          />
        </div>
      </m-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from "vue";

const modalVisivle = ref(false);
const emit = defineEmits<{
  (event: "changeDiagramDesc", desc: string, key: string): void;
}>();

const props = defineProps<{
  row: any;
  selected?: boolean;
  configurationDisabled?: boolean;
}>();
let inputvalue = ref<string>(props.row.value as string);

const disabled = computed(() => {
  return props.row.readonly || props.configurationDisabled;
});

watch(
  () => props.row.value,
  newVal => {
    inputvalue.value = newVal as string;
  }
);
const handleInputChange = (val: string) => {
  emit("changeDiagramDesc", val, props.row.key);
};

const handleClick = () => {
  modalVisivle.value = true;
};

const handleOkModal = () => {
  modalVisivle.value = false;
  emit("changeDiagramDesc", inputvalue.value, props.row.key);
};

const handleCancelModal = () => {
  modalVisivle.value = false;
};
</script>
<style lang="scss" scoped>
.v-diagram-desc-wrap {
  height: auto;
  > .img-btn {
    display: flex;
    align-items: center;
  }
  .el-input .el-input__inner {
    padding-right: 0px;
  }

  :deep(.el-textarea__inner) {
    resize: none;
    overflow: auto;
    text-overflow: ellipsis;
    border: none;
    box-shadow: none;
    height: 100%;
  }

  .v-diagram-desc-modal {
    ._input {
      width: 100%;
      height: 100%;
      .el-textarea__inner {
        height: 100%;
      }
    }
  }
}
._disable {
  cursor: not-allowed;
  background-color: #f5f7fa;
  // filter: grayscale(100);
}
</style>
